<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="仓库编号" prop="ckbh">
        <el-input v-model="queryParams.ckbh" placeholder="请输入 " clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="车号" prop="chehao">
        <el-input v-model="queryParams.chehao" placeholder="请输入 " clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="称重编号" prop="czbh">
        <el-input v-model="queryParams.czbh" placeholder="请输入 " clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="物料名称" prop="wlmc">
        <el-input v-model="queryParams.wlmc" placeholder="请输入 " clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="榜单打印次数" prop="ddbdcs">
        <el-input v-model="queryParams.ddbdcs" placeholder="请输入 " clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="订单编号" prop="ddbh">
        <el-input v-model="queryParams.ddbh" placeholder="请输入 " clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="是否退车" prop="yj">
        <el-select v-model="queryParams.yj" placeholder="请选择" clearable @keyup.enter.native="handleQuery">
          <el-option label="退车" value="退车" />
          <el-option label="正常" value="正常" />
        </el-select>
      </el-form-item>
      <el-form-item label="时间：" prop="pzsj">
        <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
<<<<<<< HEAD
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-druid" size="mini" :disabled="single" @click="chumenzheng"
          v-hasPermi="['system:merge:list']">打印榜单</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['system:merge:list']">导出</el-button>
=======
      <!-- <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['system:merge:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['system:merge:edit']">修改</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-druid" size="mini" :disabled="single" @click="chumenzheng"
          v-hasPermi="['system:merge:remove']">打印榜单</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['system:merge:export']">导出</el-button>
>>>>>>> b4a0e2dba4b1f1e0b05e6d155df4272830d06f27
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="mergeList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="称重编号" width="150" align="center" prop="czbh" />
      <el-table-column label="车号" width="150" align="center" prop="chehao" />
      <el-table-column label="客户名" width="150" align="center" prop="khmc" />
      <el-table-column label="公司名" width="150" align="center" prop="gsmc" />
      <el-table-column label="物料名" width="150" align="center" prop="wlmc" />
      <el-table-column label="仓库编号" align="center" prop="ckbh" />
      <el-table-column label="仓库名称" width="150" align="center" prop="ckmc" />
      <el-table-column label="进厂重量" align="center" prop="mz" />
      <el-table-column label="进厂时间" width="150" align="center" prop="mzsj" />
      <el-table-column label="出厂重量" align="center" prop="pz" />
      <el-table-column label="出厂时间" width="150" align="center" prop="pzsj" />
      <el-table-column label="净重" align="center" prop="jz" />
      <el-table-column label="结算重量" align="center" prop="jszl" />
      <el-table-column label="结算单价" align="center" prop="jsdj" />
      <el-table-column label="结算金额" align="center" prop="jsje" />
      <el-table-column label="过磅状态" align="center" prop="gbzt" />
      <el-table-column label="退车标记" align="center" prop="yj" />
      <el-table-column label="预发重量" align="center" prop="ddwlsl" />
      <el-table-column label="进厂地磅" align="center" prop="dbh" />
      <el-table-column label="出厂地磅" align="center" prop="dbh2" />
      <el-table-column label="进厂司磅员" width="150" align="center" prop="czymc" />
      <el-table-column label="出厂司磅员" width="150" align="center" prop="czymc2" />
      <el-table-column label="榜单打印次数" width="150" align="center" prop="ddbdcs" />
      <!-- <el-table-column label="" align="center" prop="ycJzcc" />
      <el-table-column label=" " align="center" prop="ycCcc" />
      <el-table-column label=" " align="center" prop="jctuCp" />
      <el-table-column label=" " align="center" prop="jctuHk" />
      <el-table-column label=" " align="center" prop="cctuCp" />
      <el-table-column label=" " align="center" prop="cctuHk" />
      <el-table-column label=" " align="center" prop="czqztc" />
      <el-table-column label=" " align="center" prop="lscp" />
      <el-table-column label=" " align="center" prop="lscpBj" />
      <el-table-column label=" " align="center" prop="fkZdr" /> -->
      <el-table-column label="内外销" align="center" prop="sdDwx" />
      <el-table-column label="包装物名" width="150" align="center" prop="sdBzwmc" />
      <el-table-column label="重量范围-低" width="150" align="center" prop="fwZdz" />
      <el-table-column label="重量范围-高" width="150" align="center" prop="fwZgz" />
      <el-table-column label="发卡时间" width="150" align="center" prop="fksj" />
      <!-- <el-table-column label=" " align="center" prop="clFbbz" />
      <el-table-column label=" " align="center" prop="htYcclYcKg" />
      <el-table-column label=" " align="center" prop="htKgfdcc" />
      <el-table-column label=" " align="center" prop="mergeJhd" /> -->
      <el-table-column label="规格" align="center" prop="guige" />
      <!-- <el-table-column label=" " align="center" prop="gzCzbh" />
      <el-table-column label=" " align="center" prop="bz" />
      <el-table-column label=" " align="center" prop="ddbh" /> -->
      <!-- <el-table-column label="仓库确认照片" align="center" prop="photoCkqr" />
      <el-table-column label="装卸车确认照片" align="center" prop="photoZxcqr" /> -->
      <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['system:merge:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['system:merge:remove']">删除</el-button>
        </template>
</el-table-column> -->
    </el-table>
    <!-- 显示结算单价的总和 -->
    <div style="margin-top: 20px; font-weight: bold;">
      总扣重：{{ kzhj }} <br>
      预发吨位合计: {{ ddwlslhj }} <br>
      结算重量合计：{{ jszlhj }}
    </div>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改多交货单对话框 -->
    <duojiaohuodan ref="duojiaohuodan" :formData="form"></duojiaohuodan>
  </div>
</template>

<script>
import { listMerge, getMerge, delMerge, addMerge, updateMerge } from "@/api/system/Fdongbei/merge";
import QRCode from 'qrcodejs2'
import duojiaohuodan from "../bangdan/duojiaohuodan.vue"
export default {
  components: {
    duojiaohuodan
  },
  name: "Merge",
  data() {
    const today = new Date();
    const twoWeeksAgo = new Date(today);
    twoWeeksAgo.setDate(today.getDate() - 14);

    const formatDate = (date) => {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    };
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 多交货单表格数据
      mergeList: [],
      ddwlslhj: 0,
      jszlhj: 0,
      kzhj: 0,
      // 弹出层标题
      title: "",
      // 日期时间
      dateRange: [formatDate(twoWeeksAgo), formatDate(today)],
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        mid: null,
        kahao: null,
        chehao: null,
        khbh: null,
        khmc: null,
        gsmc: null,
        gsbh: null,
        wlbh: null,
        wlmc: null,
        ckbh: null,
        ckmc: null,
        mz: null,
        mzsj: null,
        pz: null,
        pzsj: null,
        jz: null,
        yzkz: null,
        jszl: null,
        yzzl: null,
        jsdj: null,
        jsje: null,
        gblx: null,
        gbzt: null,
        xhry: null,
        yj: null,
        cmz: null,
        cmzdy: null,
        xcbm: null,
        ddwlsl: null,
        dbh: null,
        dbh2: null,
        czymc: null,
        czymc2: null,
        ddbdcs: null,
        ycJzcc: null,
        ycCcc: null,
        jctuCp: null,
        jctuHk: null,
        cctuCp: null,
        cctuHk: null,
        czqztc: null,
        lscp: null,
        lscpBj: null,
        fkZdr: null,
        sdDwx: null,
        sdBzwmc: null,
        fwZdz: null,
        fwZgz: null,
        fksj: null,
        clFbbz: null,
        htYcclYcKg: null,
        htKgfdcc: null,
        mergeJhd: null,
        guige: null,
        gzCzbh: null,
        bz: null,
        ddbh: null,
        photoCkqr: null,
        photoZxcqr: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        mid: [
          { required: true, message: " 不能为空", trigger: "blur" }
        ],
        czbh: [
          { required: true, message: " 不能为空", trigger: "blur" }
        ],
      },
      printObject: {
        id: 'qwerq',
        popTitle: '玉米检验报告单', // 打印配置页上方的标题
        extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
        preview: false, // 是否启动预览模式，默认是false
        previewTitle: '', // 打印预览的标题
        previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
        zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
        previewBeforeOpenCallback() {
          console.log('正在加载预览窗口！');
          // console.log(that.msg, this)
        }, // 预览窗口打开之前的callback
        previewOpenCallback() {
          console.log('已经加载完预览窗口，预览打开了！')
        }, // 预览窗口打开时的callback
        beforeOpenCallback() {
          console.log('开始打印之前！')
        }, // 开始打印之前的callback
        openCallback() {
          console.log('执行打印了！')
        }, // 调用打印时的callback
        closeCallback() {
          console.log('关闭了打印工具！' + window.sessionStorage.getItem('czbh'))
          UpdateHuayanDycs(window.sessionStorage.getItem('czbh')).then(response => {
            console.log('修改成功------》')
          })
        }, // 关闭打印的callback(无法区分确认or取消)
        clickMounted() {
          console.log('点击v-print绑定的按钮了！')
        },
        // url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
        // asyncUrl (reslove) {
        //   setTimeout(() => {
        //     reslove('http://localhost:8080/')
        //   }, 2000)
        // },
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    chumenzheng(row) { // 打开打印页面，并传值
      const czbh = row.czbh || this.ids;
      getMerge(czbh).then(response => {
        this.form = response.data;
        this.$refs.duojiaohuodan.select();
        this.$refs.duojiaohuodan.form = this.form;
        window.sessionStorage.setItem("czbh", this.form.czbh);
      });
    },
    totalJsdj() {
      // 使用 reduce 对 jsdj 进行求和
      return this.mergeList.reduce((sum, row) => {
        // 确保 jsdj 是数字类型
        const ddwlsl = parseFloat(row.ddwlsl) || 0;
        return sum + ddwlsl;
      }, 0);
    },
    /** 查询多交货单列表 */
    getList() {
      this.loading = true;
<<<<<<< HEAD
      this.queryParams.gbzt = "完成";
=======
>>>>>>> b4a0e2dba4b1f1e0b05e6d155df4272830d06f27
      listMerge(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        this.mergeList = response.rows;
        this.total = response.total;
        this.loading = false;

        this.ddwlslhj = this.totalJsdj()
        // ddwlslhj: 0,
        this.jszlhj = this.mergeList.reduce((sum, row) => {
          // 确保 jsdj 是数字类型
          const jszl = parseFloat(row.jszl) || 0;
          return sum + jszl;
        }, 0);
        this.kzhj = this.mergeList.reduce((sum, row) => {
          // 确保 jsdj 是数字类型
          const jz = parseFloat(row.jz) || 0;
          return sum + jz;
        }, 0) - this.jszlhj

      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        mid: null,
        czbh: null,
        kahao: null,
        chehao: null,
        khbh: null,
        khmc: null,
        gsmc: null,
        gsbh: null,
        wlbh: null,
        wlmc: null,
        ckbh: null,
        ckmc: null,
        mz: null,
        mzsj: null,
        pz: null,
        pzsj: null,
        jz: null,
        yzkz: null,
        jszl: null,
        yzzl: null,
        jsdj: null,
        jsje: null,
        gblx: null,
        gbzt: null,
        xhry: null,
        yj: null,
        cmz: null,
        cmzdy: null,
        xcbm: null,
        ddwlsl: null,
        dbh: null,
        dbh2: null,
        czymc: null,
        czymc2: null,
        ddbdcs: null,
        ycJzcc: null,
        ycCcc: null,
        jctuCp: null,
        jctuHk: null,
        cctuCp: null,
        cctuHk: null,
        czqztc: null,
        lscp: null,
        lscpBj: null,
        fkZdr: null,
        sdDwx: null,
        sdBzwmc: null,
        fwZdz: null,
        fwZgz: null,
        fksj: null,
        clFbbz: null,
        htYcclYcKg: null,
        htKgfdcc: null,
        mergeJhd: null,
        guige: null,
        gzCzbh: null,
        bz: null,
        ddbh: null,
        photoCkqr: null,
        photoZxcqr: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.czbh)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加多交货单";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const czbh = row.czbh || this.ids
      getMerge(czbh).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改多交货单";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.czbh != null) {
            updateMerge(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addMerge(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const czbhs = row.czbh || this.ids;
      this.$modal.confirm('是否确认删除多交货单编号为"' + czbhs + '"的数据项？').then(function () {
        return delMerge(czbhs);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/merge/export', {
        ...this.queryParams
      }, `merge_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style @media="print">
@page {
  size: auto;
  margin: 3mm;
}

html {
  background-color: #ffffff;
  height: auto;
  margin: 0px;
}
</style>